/**
 * Created by Scott on 2017/4/25.
 */
/**
 * Created by Scott on 2017/3/27.
 */
// index.jsx 文件
import React from 'react'
import { HashRouter as Router, Route } from 'react-router-dom';
import Generator from './page/Generator/Generator';
import Home from './page/Home/Home';
import './index.css';
import { Layout, Menu } from 'antd';
const {Header, Content, Footer} = Layout;
class App extends React.Component {

  constructor ( props ) {
    super(props);
    this.state = {
      current: '1',
      openKeys: []
    };
    this.handleClick = this.handleClick.bind(this);
    this.onOpenChange = this.onOpenChange.bind(this);
  }

  handleClick ( e ) {
    window.location.hash = e.key; // 被点击元素的‘key’的值‘about’就是页面跳转的路径
    console.log('Clicked: ', e);
    this.setState({current: e.key});
  };

  onOpenChange ( openKeys ) {
    this.setState({openKeys: openKeys});
  };


  render () {
    return (
      <Router>
        <Layout className="layout">
          <Header>
            <Menu
              mode="horizontal"
              openKeys={this.state.openKeys}
              selectedKeys={[this.state.current]}
              style={{ height: '100%' }}
              onOpenChange={this.onOpenChange}
              onClick={this.handleClick}
            >
              <Menu.Item key="home">首页</Menu.Item>
              <Menu.Item key="generator">代码生成器</Menu.Item>
            </Menu>
          </Header>
          <Content style={{ padding: '0 50px' }}>
            <div style={{ background: '#fff', padding: 24, minHeight: 550 }}>
              <Route exact path="/home" component={Home}/>
              <Route exact path="/generator" component={Generator}/>
            </div>
          </Content>
          <Footer style={{ textAlign: 'center' }}>
            XXX
          </Footer>
        </Layout>
      </Router>
    );
  }
}

export default App;